<template>
  <div class="page-container" v-loading="loading">
    <div class="panel-outer" id="PanelSearch">
      <div class="panel-container panel1">
        <div class="line">
          <span class="label">招标公告原文链接：</span>
          <a :href="itemInfo.href" target="_blank" class="link">{{ itemInfo.href }}</a>
        </div>
        <div class="line" v-if="itemInfo.zb_dw">
          <span class="label">中标公告原文链接：</span>
          <a :href="updateUrlParam(itemInfo.href)" target="_blank" class="link">{{ updateUrlParam(itemInfo.href) }}</a>
        </div>
        <div class="quick-search">
          <div class="label">快速检索：</div>
          <div class="label-list">
            <el-tag size="small" v-for="item in labelList" class="label-item" :key="item.label" :effect="labelActive === item.id ? 'dark' : 'plain'" @click="handleSearch(item)">
              {{ item.label }}
            </el-tag>
          </div>
        </div>
        <div class="line" v-if="searchResult">
          <div class="label">检索结果：</div>
          <div class="num">共{{ searchResult.length }}个</div>
          <div class="num" v-if="searchResult.length > 1">第{{ searchIndex + 1 }}个</div>
          <el-button size="mini" type="text" class="grey" @click="handlePrev" v-if="searchResult.length > 1">上一个</el-button>
          <el-button size="mini" type="text" class="grey" @click="handleNext" v-if="searchResult.length > 1">下一个</el-button>
          <el-button size="mini" type="text" class="grey" @click="handleCancel">取消检索</el-button>
        </div>
      </div>
    </div>
    <div class="page-content" id="PanelContent">
      <div class="panel-outer1">
        <div class="panel-container panel2">
          <div class="detail-title">{{ itemInfo.title }}</div>
          <div class="detail-zt">
            <el-tag size="small" class="tag" type="danger" effect="dark">
              <span v-if="itemInfo.zb_dw">中标({{ itemInfo.zb_dw }})</span>
              <span v-else>{{ itemInfo.zt }}</span>
            </el-tag>
          </div>
          <div class="detail-bh">招标编号{{ itemInfo.bh }}</div>
          <div class="detail-line">
            <el-row>
              <el-col :span="8">
                <div class="item"><i class="el-icon-s-order"></i> 项目：{{ itemInfo.xm_name }}</div>
              </el-col>
              <el-col :span="8">
                <div class="item"><i class="el-icon-time"></i> 发布时间：{{ itemInfo.fbsj }}</div>
              </el-col>
              <el-col :span="8">
                <div class="item"><i class="el-icon-date"></i> 报名截止：{{ itemInfo.bmjzsj }}</div>
              </el-col>
              <el-col :span="8">
                <div class="item"><i class="el-icon-location-information"></i> 区域：{{ itemInfo.qy }}</div>
              </el-col>
              <el-col :span="8">
                <div class="item"><i class="el-icon-menu"></i> 招标品类：{{ itemInfo.lb }}</div>
              </el-col>
              <el-col :span="8">
                <div class="item"><i class="el-icon-date"></i> 投标截止：{{ itemInfo.tbjzsj }}</div>
              </el-col>
            </el-row>
          </div>
          <div id="contentMain" class="detail-container" v-html="detailInfo"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { apiYunZhuDetail } from '@/api/auctionIndustryData'
import { formatFormData, updateUrlParam } from '@/utils'

export default {
  name: 'detail',
  data() {
    return {
      loading: false,
      itemInfo: '',
      detailInfo: '',
      labelActive: 0,
      labelList: [
        { id: 1, label: '招标范围' },
        { id: 2, label: '招标组织' },
        { id: 3, label: '招标项目' },
        { id: 4, label: '建筑面积' },
        { id: 5, label: '规模' },
        { id: 6, label: '工程地址' },
        { id: 7, label: '联系方式' },
        { id: 8, label: '联系人' },
        { id: 9, label: '联系电话' },
        { id: 10, label: '电话' },
        { id: 11, label: '招标内容' },
      ],
      searchResult: null,
      searchIndex: 0,
    }
  },
  mounted() {
    this.getDetail()
  },
  methods: {
    // 获取详情数据
    getDetail() {
      this.getItemInfo()
      this.dataInfoLoading = true
      const info = formatFormData({ id: this.$route.query.id })
      apiYunZhuDetail(info).then((res) => {
        this.detailInfo = res.data.context
        this.dataInfoLoading = false
        this.setContentHeight()
      })
    },
    // 获取storage中数据
    getItemInfo() {
      const data = localStorage.getItem('yunzhu-item-info')
      if (data) {
        this.itemInfo = JSON.parse(data)
      } else {
        this.$message.error('数据丢失')
      }
    },
    // 设置内容区域高度
    setContentHeight() {
      this.$nextTick(() => {
        const height = $('#PanelSearch').height()
        $('#PanelContent').height(`calc(100% - ${height}px - 20px)`)
      })
    },
    // 上一条
    handlePrev() {
      this.searchIndex--
      if (this.searchIndex < 0) {
        this.searchIndex = this.searchResult.length - 1
      }
      this.scrollToView()
    },
    // 下一条
    handleNext() {
      this.searchIndex++
      if (this.searchIndex >= this.searchResult.length) {
        this.searchIndex = 0
      }
      this.scrollToView()
    },
    // 取消检索
    handleCancel() {
      this.labelActive = 0
      if (this.searchResult) {
        this.searchResult.each((index, ele) => {
          $(ele).removeClass('SEARCHRESULT')
          $(ele).removeClass('ACTIVE_SEARCHRESULT')
        })
      }
      this.searchResult = null
      this.setContentHeight()
    },
    // 生成中标链接
    updateUrlParam(url) {
      if (!url) {
        return
      }
      return updateUrlParam(url, 'tenderCode', 'bh')
    },
    handleSearch(item) {
      this.handleCancel()
      this.labelActive = item.id
      this.findInPage(item.label)
    },
    findInPage(searchText) {
      if (searchText.length === 0) {
        return
      }
      this.searchResult = []
      this.searchIndex = 0
      const content = $('#contentMain').html()
      var regExp = new RegExp(searchText, 'g')
      var newHtml = content.replace(regExp, '<span class="SEARCHRESULT">' + searchText + '</span>')
      $('#contentMain').html(newHtml)
      this.searchResult = $('.SEARCHRESULT')
      this.setContentHeight()
      if (this.searchResult.length === 0) {
        return
      }
      this.scrollToView()
    },
    scrollToView() {
      if (!this.searchResult || !this.searchResult[this.searchIndex]) {
        return
      }
      this.searchResult.each((index, ele) => {
        if (index === this.searchIndex) {
          $(ele).addClass('ACTIVE_SEARCHRESULT')
        } else {
          $(ele).removeClass('ACTIVE_SEARCHRESULT')
        }
      })
      this.searchResult[this.searchIndex].scrollIntoView({
        behavior: 'smooth',
        block: 'center',
      })
    },
  },
}
</script>
<style>
.SEARCHRESULT {
  background: yellow;
  color: red;
}
.ACTIVE_SEARCHRESULT {
  background: orange;
}
</style>

<style lang="scss" scoped>
.page-container {
  padding-right: 0;
  padding-bottom: 0;
}
.page-content {
  height: 100%;
  overflow: hidden;
  overflow-y: scroll;
}
.line {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.panel-outer {
  padding-right: 20px;
}
.panel1 {
  font-size: 14px;
  .link {
    color: #409eff;
  }
  .quick-search {
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    .label {
      line-height: 30px;
    }
    .label-list {
      .label-item {
        margin-right: 6px;
        cursor: pointer;
      }
    }
  }
  .num {
    margin-right: 20px;
  }
}
.panel2 {
  font-size: 14px;
  .detail-title {
    text-align: center;
    font-size: 22px;
    font-weight: bold;
    line-height: 2;
  }
  .detail-zt {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    .tag {
      padding: 0 30px;
    }
  }
  .detail-bh {
    color: #333;
    line-height: 3;
  }
  .detail-line {
    color: #999;
    line-height: 3;
    font-size: 12px;
    .item {
      padding-right: 20px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .detail-container {
    margin-top: 30px;
    padding: 32px 24px;
    border: 1px solid #ddd;
  }
}
</style>
